import { Paper, Typography } from "@mui/material";
import useWebAnimations from "@wellyshen/use-web-animations";
import React, { useEffect } from "react";

export default function Mycard(props) {
  const { ref, animate } = useWebAnimations();

  useEffect(() => {
    console.log(props.number, props.posx, props.posy);
    animate({
      keyframes: {
        transform: `translate(${
          props.posx * (props.posy == -350 ? 40 : 50) + 5
        }px,${props.posy - 33}px)`,
      },
      animationOptions: { duration: 300, fill: "forwards" },
    });
  }, [props.posx, props.posy]);

  return (
    <>
      {props.number && (
        <Paper
          sx={{
            width: 16,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            padding: 1,
            position: "absolute",
          }}
          elevation={4}
          ref={ref}
        >
          <Typography>{props.number}</Typography>
        </Paper>
      )}
    </>
  );
}
